import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:jump_scape/js_ui/js_activity/js_home.dart';
import 'package:jump_scape/js_ui/js_dialog/js_login.dart';
import 'package:jump_scape/js_ui/js_widget/js_blur_group.dart';
import 'package:jump_scape/js_ui/js_widget/js_image_view.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:jump_scape/js_ui/js_widget/js_style.dart';
import 'package:jump_scape/js_ui/js_widget/js_text_ghosting_view.dart';
import 'package:url_launcher/url_launcher.dart';

import '../../js_config.dart';
import '../../js_data/js_event.dart';
import '../../js_data/js_login.dart';
import '../js_dialog/js_loading.dart';

class JsLoginActivity extends StatefulWidget {
  static const url = 'login';
  const JsLoginActivity({super.key});

  @override
  State<StatefulWidget> createState() => _JsLoginActivity();
}

class _JsLoginActivity extends State<JsLoginActivity> {
  var _isAgree = false;

  @override
  void initState() {
    super.initState();
    JsApp.initATT();
    JsApp.getVersionName();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => Future.value(false),
      child: Scaffold(
        body: Stack(
          children: [
            jsImage('assets/image/ic_login_bg.png', width: double.infinity, height: double.infinity, fit: BoxFit.cover),
            Column(
              children: [
                Spacer(flex: 80),
                Container(
                  width: 100.r,
                  height: 100.r,
                  clipBehavior: Clip.antiAlias,
                  decoration: jsShapeRound(radius: 10.r),
                  child: jsImage('assets/image/ic_logo.png'),
                ),
                Spacer(flex: 80),
                JsBlurGroup(
                  width: double.infinity,
                  height: 259.r,
                  radius: 30.r,
                  margin: EdgeInsets.symmetric(horizontal: 34.r),
                  padding: EdgeInsets.symmetric(horizontal: 16.r),
                  child: Column(
                    children: [
                      Spacer(flex: 28),
                      JsTextGhostingView(JsApp.appName, fontSize: 24.r),
                      Spacer(flex: 37),
                      buttonGroup(
                        name: 'Get in',
                        icon: 'assets/image/ic_login_get_in.png',
                        iconWidth: 28.r,
                        onTap: () {
                          if (_isAgree) {
                            login(isAppleLogin: false);
                          } else {
                            jsShowLoginAgreementDialog(context, (isAgree) {
                              _isAgree = isAgree;
                              setState(() {});

                              if (isAgree) {
                                login(isAppleLogin: false);
                              }
                            });
                          }
                        },
                      ),
                      Spacer(flex: 22),
                      buttonGroup(
                        name: 'Sign in with Apple',
                        icon: 'assets/image/ic_login_apple.png',
                        iconWidth: 16.r,
                        onTap: () {
                          if (_isAgree) {
                            login(isAppleLogin: true);
                          } else {
                            jsShowLoginAgreementDialog(context, (isAgree) {
                              _isAgree = isAgree;
                              setState(() {});

                              if (isAgree) {
                                login(isAppleLogin: true);
                              }
                            });
                          }
                        },
                      ),
                      Spacer(flex: 48),
                    ],
                  ),
                ),
                Spacer(flex: 30),
                JsBlurGroup(
                  width: double.infinity,
                  radius: 18.r,
                  margin: EdgeInsets.symmetric(horizontal: 34.r),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      InkWell(
                        child: jsImage(_isAgree ? 'assets/image/ic_login_checked.png' : 'assets/image/ic_login_check.png', width: 14.r, height: 14.r, padding: EdgeInsets.only(left: 15.r, top: 17.r, right: 8.r, bottom: 10.r)),
                        onTap: () {
                          _isAgree = !_isAgree;
                          setState(() {});
                        },
                      ),
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(left: 0, top: 13.r, right: 40.r, bottom: 13.r),
                          child: Text.rich(
                            TextSpan(
                              text: 'By using our App you agree with our ',
                              style: jsTextStyle(font: JsTextFont.October_Devanagari_Regular, fontSize: 11.r, fontColor: Color(0xFF050A32), height: 20.0 / 11, letterSpacing: -0.1),
                              children: [
                                TextSpan(
                                  text: 'Term of Use',
                                  style: jsTextStyle(font: JsTextFont.October_Devanagari_Regular, decoration: TextDecoration.underline),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      JsEventManager.statPage(page: JsEventName.jsNameTerms);

                                      launchUrl(Uri.parse(JsApp.jsTOS));
                                    },
                                ),
                                TextSpan(text: ' and '),
                                TextSpan(
                                  text: 'Privacy Policy.',
                                  style: jsTextStyle(font: JsTextFont.October_Devanagari_Regular, decoration: TextDecoration.underline),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      JsEventManager.statPage(page: JsEventName.jsNamePrivacy);

                                      launchUrl(Uri.parse(JsApp.jsPP));
                                    },
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Spacer(flex: 196),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget buttonGroup({
    required String name,
    required String icon,
    required double iconWidth,
    required VoidCallback onTap,
  }) {
    return InkWell(
      child: Container(
        width: double.infinity,
        height: 44.r,
        padding: EdgeInsets.only(left: 36.r, right: 26.r),
        decoration: jsShapeRound(
          radius: 22.r,
          color: Colors.white,
          shadows: [BoxShadow(offset: Offset(0, 4.5.r), color: Colors.black.withOpacity(0.1), blurRadius: 4.5.r)],
        ),
        child: Row(
          children: [
            Text(name, style: jsTextStyle(font: JsTextFont.Source_KeynoteartHans, fontColor: Color(0xFF050A32), fontSize: 16.r)),
            Spacer(),
            jsImage(icon, width: iconWidth, fit: BoxFit.fitWidth),
          ],
        ),
      ),
      onTap: () {
        onTap();
      },
    );
  }

  login({required bool isAppleLogin}) {
    if (isAppleLogin) {
      JsEventManager.statPage(page: JsEventName.jsNameApplelogin);
    } else {
      JsEventManager.statPage(page: JsEventName.jsNameQuicklogin);
    }

    jsShowLoadingDialog(context);

    JsLogin().login(
      isAppleLogin: isAppleLogin,
      onSuccess: (member) {
        JsEventManager.statPage(page: JsEventName.jsNameLoginsuccess);

        Navigator.pushNamedAndRemoveUntil(context, JsHomeActivity.url, (route) {
          return false;
        });
      },
      onFailed: (msg) {
        Navigator.pop(context);

        if (!isAppleLogin && msg.isNotEmpty) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text(msg, style: jsTextStyle(font: JsTextFont.PoetsenOne, fontColor: Colors.white, fontSize: 20.r)),
            ),
          );
        }
      },
    );
  }
}
